<template>
    <div id="addToDo">
      <el-descriptions id="todoData" class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <conference />
              </el-icon>
              用户ID
            </div>
          </template>
          {{ userId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              截止日期
            </div>
          </template>
          <el-date-picker v-model="toDoEndDate" type="date" placeholder="选择日期"/>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <event />
              </el-icon>
              代办事件
            </div>
          </template>
          <el-input v-model="toDoevent" type="textarea" :rows="3" placeholder="请填写代办事件..." ></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <div id="buttons">
        <el-button type="primary" @click="addToDo">添加代办</el-button>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  import { baseUrl } from "@/main.js";
  import { show_success_msg, show_error_msg } from "@/js/msg";
  export default {
    props: {
        userId: String,
    },
    data() {
      return {
        baseUrl: baseUrl,
        toDoevent: "",
        toDoEndDate: '',
      };
    },
    methods: {
      addToDo() {
        let fromdata = new FormData();
        fromdata.append("userId", this.userId);
        fromdata.append("event", this.toDoevent);
        fromdata.append("endDate", this.toDoEndDate = new Date(this.toDoEndDate).getTime());

        axios
          .post(this.baseUrl + "/Todo/addEvent", fromdata)
          .then((response) => {
            let re_data = response.data;
            if (re_data.status == 200) {
              show_success_msg("添加待办成功");
            } else {
              show_error_msg("添加待办失败", re_data.msg);
            }
          })
          .catch((error) => {
            show_error_msg("添加失败", "与服务器通讯异常");
          });
      },
    },
  };
  </script>
  
  <style scoped>
  #editUser > #userData {
    margin-top: 12px;
  }
  
  #buttons {
    margin-top: 2vh;
  }
  </style>